<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 图标信息 -->
    <link rel="icon" href="./assets/images/logo.png" />
    <link rel="apple-touch-icon" href="./assets/images/logo.png" />
    <meta name="msapplication-TileImage" content="./assets/images/logo.png" />

    <title>SPIRIT</title>
    <!-- 引入boostrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- 引入动画库 -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 引入重置样式文件 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 引入首页的样式 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>

<body>
    <!-- 视频背景 -->
    <div id="background" autoplay loop muted>
        <!-- <img src="./assets/images/280048.jpg" alt=""> -->
    </div>

    <!-- 头部 -->
    <header id="header" class="header">
        <nav class="navbar navbar-inverse">
            <div class="container">
                <!-- 移动端切换导航 -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand logo wow flipInY" href="#banner">Spirit8</a>
                </div>

                <!-- 导航列表元素 -->
                <div class="menu collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li><a class="wow fadeInDownBig" data-wow-delay="0ms"
                                href="#about"><span>HOME</span></a></li>
                        <li><a href="#team" class="wow fadeInDownBig" data-wow-delay="20ms"
                                href="#team-two"><span>About</span></a></li>
                        <li><a class="wow fadeInDownBig" data-wow-delay="40ms"
                                href="#team-shree"><span>SERVICES</span></a></li>
                        <li><a class="wow fadeInDownBig" data-wow-delay="60ms"
                                href="#work"><span>portfolio</span></a></li>
                        <li><a class="wow fadeInDownBig" data-wow-delay="80ms"
                                href="#clients"><span>testimonials</span></a></li>
                        <li><a class="wow fadeInDownBig" data-wow-delay="100ms"
                                href="#contact"><span>CONTACT</span></a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- banner -->
    <div id="banner" class="banner">
        <div class="box">
            <div class="title wow fadeInUp" data-wow-delay=".2s">wELCOME on <span>spirit8</span></div>
            <p class="desc wow fadeInUp" data-wow-delay=".3s">
                We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span>
            </p>
            <div class="more wow rubberBand" data-wow-delay=".4s">
                <a href="javascript:void(0)">↓</a>
            </div>
        </div>
    </div>

    <!-- about -->
    <div id="about" class="about">
        <div class="container">
            <div class="left wow fadeInUp">
                <img src="./assets/images/mac.png" />
            </div>
            <div class="right">
                <div class="info">
                    <span class="short wow fadeInUp" data-wow-delay="100ms">ABOUT US</span>
                    <div class="title wow fadeInUp" data-wow-delay="200ms">
                        <span>SOME</span>
                        Some words
                        <span>about us</span>
                    </div>
                </div>

                <p class="content wow fadeInUp" data-wow-delay="300ms">
                    We love building and rebuilding brands through our specific skills. Using colour, fonts, and
                    illustration, we brand companies in a way they will never forget.
                </p>

                <ul class="newlist">
                    <li class="wow fadeInUp" data-wow-delay="400ms">
                        <span class="glyphicon glyphicon-record"></span>
                        <span>Mission - </span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                    <li class="wow fadeInUp" data-wow-delay="500ms">
                        <span class="glyphicon glyphicon-record"></span>
                        <span>Mission - </span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                    <li class="wow fadeInUp" data-wow-delay="600ms">
                        <span class="glyphicon glyphicon-record"></span>
                        <span>Mission - </span>
                        <span>We deliver uniqueness and quality</span>
                    </li>
                </ul>

                <div class="work_btn wow fadeInUp" data-wow-delay="700ms">
                    <span class="icon">
                        <img src="./assets/images/btn-icon.png" />
                    </span>
                    <a href="javascript:void(0)">Browse our work</a>
                </div>
            </div>
        </div>
    </div>

    <!-- team -->
    <div id="team" class="team">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="0ms">
                Meet <span>our team</span>
            </div>
            <input type="radio" name="list" id="list1" checked />
            <div class="list">
                <div class="item wow fadeInUp" data-wow-delay="100ms">
                    <div class="thumb">
                        <img src="./assets/images/thumb.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="thumb">
                        <img src="./assets/images/thumb.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="300ms">
                    <div class="thumb">
                        <img src="./assets/images/thumb.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="400ms">
                    <div class="thumb">
                        <img src="./assets/images/thumb.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>
            <input type="radio" name="list" id="list2" />
            <div class="list">
                <div class="item wow fadeInUp" data-wow-delay="100ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="300ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="400ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>
            <input type="radio" name="list" id="list3" />
            <div class="list">
                <div class="item wow fadeInUp" data-wow-delay="100ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img2.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img2.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="300ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img2.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="400ms">
                    <div class="thumb">
                        <img src="./assets/images/work-img2.png" />
                    </div>

                    <div class="content">
                        <div class="title">Jason Statham</div>
                        <div class="info">Knife designer</div>
                        <div class="desc">Do not seek to change what has come before. Seek to create that which has not.
                        </div>
                    </div>
                </div>
            </div>

            <div class="more wow fadeInUp" data-wow-delay="400ms">
                <label for="list1"></label>
                <label for="list2"></label>
                <label for="list3"></label>
            </div>
        </div>
    </div>

    <!-- team-two-->
    <div id="team-two" class="team-two">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="0ms">
                take a look at <span>our services</span>
            </div>
            <div class="fontcolor">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
                Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
                theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
                sit amet..", comes from a line in section 1.10.32.</div>
            <div class="list">
                <div class="item wow fadeInUp" data-wow-delay="100ms">
                    <div class="thumb">
                        <img src="./assets/images/33-spirit8-digital-agency_03.png" />
                    </div>

                    <div class="content">
                        <div class="title">Mobile apps</div>

                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="200ms">
                    <div class="thumb">
                        <img src="./assets/images/33-spirit8-digital-agency_05.png" />
                    </div>

                    <div class="content">
                        <div class="title">Web design</div>

                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="300ms">
                    <div class="thumb">
                        <img src="./assets/images/33-spirit8-digital-agency_07.png" />
                    </div>

                    <div class="content">
                        <div class="title">PHOTOGRAPHY</div>

                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a
                            line in section 1.10.32.
                        </div>
                    </div>
                </div>
                <div class="item wow fadeInUp" data-wow-delay="400ms">
                    <div class="thumb">
                        <img src="./assets/images/33-spirit8-digital-agency_09.png" />
                    </div>

                    <div class="content">
                        <div class="title">marketing</div>

                        <div class="desc">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
                            a line in section 1.10.32.
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
    <!-- team-shree -->
    <div id="team-shree" class="team-shree">
        <div class="container">
            <div class="subject wow fadeInUp" data-wow-delay="0ms">
                SOME OF<span>OUR CLIENTS</span>
            </div>
            <div class="sub-1 wow fadeInUp" data-wow-delay="200ms">
                <span>CHANEL</span>
                <span>ZARA</span>
                <span>GUERLAIN</span>
                <span>LANCOME</span>
                <span>LACOSTE</span>
            </div>
            <div class="more wow fadeInUp" data-wow-delay="300ms">

                <label></label>
                <label></label>
                <label></label>
            </div>
        </div>
    </div>


    <!-- work -->
    <div id="work" class="work">
        <div class="container">
            <div class="subject wow fadeInUp">
                take a look at <span>our work</span>
            </div>

            <div class="desc wow fadeInUp">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et
                Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the
                theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor
                sit amet..", comes from a line in section 1.10.32.</div>

            <div class="box">
                <div class="top">
                    <div class="left wow fadeInUp">Filter by type</div>
                    <div class="right wow fadeInUp">
                        <a href="javascript:void(0)">All</a>
                        <a href="javascript:void(0)">Web design</a>
                        <a href="javascript:void(0)">Mobile design</a>
                        <a href="javascript:void(0)">Photograpy</a>
                    </div>
                    <div class="cate wow fadeInUp">
                        <select name="cate">
                            <option>请选择</option>
                            <option>All</option>
                            <option>Web design</option>
                            <option>Mobile design</option>
                            <option>Photograpy</option>
                        </select>
                    </div>
                </div>

                <div class="list">
                    <div class="item wow fadeInUp" data-wow-delay="100ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="150ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="200ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="250ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="300ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="350ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="400ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="450ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img2.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="500ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="550ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="600ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                    <div class="item wow fadeInUp" data-wow-delay="650ms">
                        <div class="thumb">
                            <img src="./assets/images/work-img3.png" />
                        </div>
                        <div class="ying">
                            <p>trend and fashion</p>
                            <p>website design</p>
                            <div class="glyphicon glyphicon-plus"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- clients -->
    <div id="clients" class="clients">
        <div class="container">
            <div class="subject wow fadeInUp">
                <span>our clients’</span> testimonials
            </div>

            <input type="radio" name="client" id="client1" checked />
            <div class="content wow fadeInUp" data-wow-delay="100ms">
                <p class="desc">
                    111111
                </p>

                <p class="name">Dean Martin, CEO Acme Inc.</p>
            </div>

            <input type="radio" name="client" id="client2" />
            <div class="content">
                <p class="desc">
                    222222
                </p>

                <p class="name">Dean 1231231232.</p>
            </div>

            <input type="radio" name="client" id="client3" />
            <div class="content">
                <p class="desc">
                    33333
                </p>

                <p class="name">Dean Magfhfghfghfghfghnc.</p>
            </div>

            <div class="more wow fadeInUp" data-wow-delay="200ms">
                <label for="client1"></label>
                <label for="client2"></label>
                <label for="client3"></label>
            </div>
        </div>
    </div>

    <!-- contact -->
    <div id="contact" class="contact">
        <div class="container">
            <div class="subject wow fadeInUp">
                feel free to <span>contact us</span>
            </div>

            <p class="desc wow fadeInUp" data-wow-delay="100ms">Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of
                "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book
                is a treatise on the theory of ethics, very popular during the Renaissance. </p>

            <div class="content">
                <div class="info wow fadeInUp" data-wow-delay="200ms">
                    <div class="left">
                        <div class="top">
                            <span>Name</span>
                            <sup>*</sup>
                        </div>
                        <div class="bottom">
                            <input type="text" name="username" required placeholder="请输入用户名" />
                        </div>
                    </div>
                    <div class="right">
                        <div class="top">
                            <span>Email</span>
                            <sup>*</sup>
                        </div>
                        <div class="bottom">
                            <input type="email" name="email" required placeholder="请输入邮箱地址" />
                        </div>
                    </div>
                </div>
                <div class="message wow fadeInUp" data-wow-delay="300ms">
                    <div class="top">
                        <span>Message</span>
                        <sup>*</sup>
                    </div>
                    <div class="bottom">
                        <textarea name="message" rows="8" placeholder="请输入留言内容" required></textarea>
                    </div>
                </div>
                <div class="send wow fadeInUp" data-wow-delay="400ms">
                    <button type="button">SEND</button>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <footer id="footer" class="footer">
        <div class="container">
            <div class="box">
                <div class="copyright wow fadeInUp">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
                <div class="links">
                    <a class="wow fadeInUp" data-wow-delay="100ms" href="javascript:void(0)">
                        <img src="./assets/images/footer1.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="200ms" href="javascript:void(0)">
                        <img src="./assets/images/footer2.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="300ms" href="javascript:void(0)">
                        <img src="./assets/images/footer3.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="400ms" href="javascript:void(0)">
                        <img src="./assets/images/footer4.png" />
                    </a>
                    <a class="wow fadeInUp" data-wow-delay="500ms" href="javascript:void(0)">
                        <img src="./assets/images/footer5.png" />
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- 返回顶部 -->
    <div id="back">
        <a href="#banner" id="gotop">
            <img src="./assets/images/top.svg" />
        </a>
    </div>
</body>

</html>
<!-- 引入jquery -->
<script src="./assets/js/jquery.min.js"></script>

<!-- 引入bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- 引入解析less的插件 -->
<script src="./assets/js/less.min.js"></script>

<!-- 引入懒加载的插件 -->
<script src="./assets/js/wow.min.js"></script>

<script>
    //获取到视频元素
    var background = document.getElementById("background")

    //将视频速度调慢
    background.playbackRate = 1


    //懒加载初始化
    new WOW().init()

    //给页面绑定一个监听滚动条变化的事件
    $(document).scroll(function () {
        //获取到拉动一个距离
        var distance = $(this).scrollTop()

        //当前滚动条的值只要是大于10px 就给导航条添加背景色
        if (distance > 10) {
            $("#header").css({ "backgroundColor": "#111111", paddingBottom: 0 })
            $("#gotop").css({ zIndex: 99998, opacity: 1 })
        } else {
            //小于等于10
            $("#header").css({ 'backgroundColor': 'transparent', paddingBottom: '1em' })
            $("#gotop").css({ zIndex: -99998, opacity: 0 })
        }
    })


    //锚点的缓动效果 给特定链接元素 绑定点击事件
    $("#back a,.menu a,#banner a,.logo").click(function () {
        // console.log()
        //获取链接地址上面的路径部分(不包含域名)
        // location.pathname
        //replace 替换
        // 正则表达式 /^\// ^ 以....开始  \(转义) /
        // console.log(location.pathname) 系统的路径
        // console.log(location.pathname.replace(/^\//, '')) //系统替换的路径
        // this 你点击的是谁 他就是那个元素  点击 a元素 this == a 
        // console.log(this) //当前元素
        // console.log(this.pathname)  点击当前元素所跳转链接的路径
        // console.log(this.pathname.replace(/^\//, ''))  当前元素所跳转链接替换后的路径

        // console.log(location.hostname)  //系统获取域名部分
        // console.log(this.hostname)  //当前元素所跳转链接的域名部分

        //系统替换后的结果
        var LocationReplace = location.pathname.replace(/^\//, '')
        var CurrentReplace = this.pathname.replace(/^\//, '')

        //系统获取的域名部分
        var LocationHostname = location.hostname
        var CurrentHostname = this.hostname

        //true 真 结果一样 false 结果不一样
        // console.log(LocationReplace == CurrentReplace)
        // console.log(LocationHostname == CurrentHostname)
        // && 两个条件必须同时为真 才返回 true  否则false
        // console.log(true && false) //逻辑不短路 第一个为真 不代表第二个就为真 所以后面还要正常执行
        // console.log(false && false) //逻辑短路不执行

        //判断你跳转的链接 是不是在当前界面

        // http://www.baidu.com
        // http://www.baidu.com/#top 
        // http://www.taobao.com/#top 

        //你必须是跳转到当前界面的链接  才能做锚点
        if (LocationReplace == CurrentReplace && LocationHostname == CurrentHostname) {
            //获取将要跳转的锚点位置
            var $target = $(this.hash)

            //一定要当他找到锚点元素的时候，才跳转锚点
            if ($target.length > 0) {
                //获取目标元素的位置
                var pos = $target.offset().top

                //让页面的body和html 滚动到 pos这个位置
                $("html,body").animate({
                    //指的就是滚动条的距离
                    scrollTop: pos
                }, 1000)
            }

            //阻止刷新界面
            return false

        }



    })



</script>